<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<cw:base />
		<script type="text/javascript">
			function doquery(){
				Wonders.grid.doQuery('gridForm','grid');
				Wonders.grid.doQuery('gridForm','gridnopage');
			}
			
  			function showDetails(v,m,r) {
 				var id = r.get('id');
 				var result = "";
 				if(true){
 					result = '<a onclick="details(\'details.jsp?id='+id+'\',\'\');">查看</a>';
 				}
 				return result;
 			}
 			
 			function showSex(v,m,r) {
 				var data = [['男'],['女']];
 				var id = r.get('sex');
 				var result = data[id-1];
 				return result;
 			}
 			
 			function hideDetails() {
 				Ext.getCmp('details').close();
 			}

  		</script>
	</head>
	<body>
		<li>
			<b>以下示例主要展現了表单+表格的组合示例，</b>
		</li>
		<li>
			<b>用于信息查询，表单用作输入查询参数，表格用作过滤信息显示</b>
		</li>
		<li>
			<b>查询后的记录表格可以是分页也可以不分页</b>
		</li>
		<br>
		<br>
		<cw:fieldSet title="人员查询" autoHeight="true" content="search" />
		<cw:fieldSet title="查询结果--分页表单" autoHeight="true" content="grid1" />
		<cw:fieldSet title="查询结果--不分页表单" autoHeight="true" content="grid2" />
		<div id="search">
			<cw:form ajax="true" id="gridForm">
				<table width="600">
					<tr>
						<td>
							ID:
						</td>
						<td>
							<cw:text property="id" />
						</td>
						<td width="250">
							姓名:
						</td>
						<td>
							<cw:text property="name" />
						</td>
						<td width="250">
							性别:
						</td>
						<td>
							<cw:combobox property="sex" data="[[1,'男'],[2,'女']]" fields="['id','value']" displayField="value" valueField="id"
								emptyItem="true" />
						</td>
					</tr>
					<tr height="30">
						<td>
							<cw:button text="查询" onclick="doquery()"></cw:button>
						</td>
					</tr>
				</table>
			</cw:form>
		</div>
		<div id="grid1">
			<cw:grid url="../../../sample/combination/personinfo.query.action" width="800" height="300" id="grid"
				exportable="true" pageSize="10" stripeRows="true" stripleColor="gray" enablePage="true" selectMode="radio"
				title="详细信息" exportInServer="true">
				<cw:gridColumn property="id" width="50" title="用户身份证" />
				<cw:gridColumn property="name" width="100" title="姓名" />
				<cw:gridColumn property="sex" width="50" title="性别" renderer="function(v,m,r){return showSex(v,m,r);}" />
				<cw:gridColumn property="dateTime" width="100" dataType="date" title="生日" format="Y-m-d" />
				<cw:gridColumn property="nation" width="100" title="民族" hidden="true" />
				<cw:gridColumn property="census" width="100" title="户籍性质" rendererData="[[1,'城镇户口'],[2,'农村户口']]" />
				<cw:gridColumn property="censusAddress" width="100" title="户籍所在地" hidden="true" />
				<cw:gridColumn property="zip" width="100" title="邮政编码" hidden="true" />
				<cw:gridColumn property="phone" width="100" title="座机" hidden="true" />
				<cw:gridColumn property="moblie" width="100" title="手机" hidden="true" />
				<cw:gridColumn property="bankName" width="100" title="开户银行" hidden="true" />
				<cw:gridColumn property="cardType" title="开卡类型" hidden="true" />
				<cw:gridColumn property="cardNumber" width="100" title="卡号" hidden="true" />
				<cw:gridColumn property="cash" width="80" title="现金余额" hidden="true" />
				<cw:gridColumn property="detail" width="80" renderer="function(v,m,r){return showDetails(v,m,r);}" title="详细信息" />
			</cw:grid>
		</div>
		<div id="grid2">
			<cw:grid url="../../../sample/combination/personinfo.querynopage.action" width="800" height="300"
				id="gridnopage" enablePage="false" exportable="true" selectMode="radio" title="详细信息">
				<cw:gridColumn property="id" width="50" title="用户身份证" />
				<cw:gridColumn property="name" width="100" title="姓名" />
				<cw:gridColumn property="sex" width="50" title="性别" renderer="function(v,m,r){return showSex(v,m,r);}" />
				<cw:gridColumn property="dateTime" width="100" dataType="date" title="生日" format="Y-m-d" />
				<cw:gridColumn property="nation" width="100" title="民族" hidden="true" />
				<cw:gridColumn property="census" width="100" title="户籍性质" />
				<cw:gridColumn property="censusAddress" width="100" title="户籍所在地" hidden="true" />
				<cw:gridColumn property="zip" width="100" title="邮政编码" hidden="true" />
				<cw:gridColumn property="phone" width="100" title="座机" hidden="true" />
				<cw:gridColumn property="moblie" width="100" title="手机" hidden="true" />
				<cw:gridColumn property="bankName" width="100" title="开户银行" hidden="true" />
				<cw:gridColumn property="cardType" title="开卡类型" hidden="true" />
				<cw:gridColumn property="cardNumber" width="100" title="卡号" hidden="true" />
				<cw:gridColumn property="cash" width="80" title="现金余额" hidden="true" />
				<cw:gridColumn property="detail" width="80" renderer="function(v,m,r){return showDetails(v,m,r);}" title="详细信息" />
			</cw:grid>
		</div>
		<cw:window url="details.jsp" id="details" width="500" height="300" />
	</body>
	<cw:theme></cw:theme>
</html>